<template>
  <div class="index">
    <div class="top">
      <div class="desc">
        <div class="d_r">
          <!-- 二维码 -->
          <img src="../../../assets/heiheihei.png" alt=""/>
          <span>手机扫码 红利同享</span>
        </div>
        <div class="d_l">
          <span>你的朋友最高可获得<em> 4000 </em>分钟通信话费赠送</span>
          <p>客户登录你的推广链接，既成为关联客户</p>
          <p>新客户首购返利产品，你即可得到相应的佣金</p>
          <div class="copy">
            
            <section class="form">
            <el-button 
              type="primary"
              v-clipboard:copy="jumpUrl"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError">
              复制推广链接
            </el-button>
          </section>
          </div>
        </div>
      </div>
      <div class="user">
        <img src="@/assets/head.png" alt="" />
        <div class="u_r">
          <h5>
            Hi,<em>{{ username }}</em>
          </h5>
          <p>这是您成为云大使的第<em>{{ days }}</em>天</p>
          <p><em> 小白 </em>（ 每单返现最高<span> 600 </span>元 ）</p>
        </div>
      </div>
      <div class="tips">邮件推广</div>
    </div>
    <div class="list">
      <p class="tit">推广指南</p>
      <div class="listContent">
        <div class="item" style="margin-top:10px">
          <div class="imgBox">
            <img src="@/assets/one.png" alt="" />
          </div>
          <p>第1步：复制推广链接分享到你的QQ、朋友圈</p>
          <div class="icon">
            <!-- <i class="iconfont icon-youtui"></i>
            <i class="iconfont icon-youtui"></i> -->
            <img src="@/assets/3.png" alt="" />
          </div>
        </div>
        <div class="item">
          <div class="imgBox">
            <img src="@/assets/two.png" alt="" />
          </div>
          <p>第2步：提醒您的朋友或 客户点击推广链接</p>
          <div class="icon">
            <!-- <i class="iconfont icon-youtui"></i>
            <i class="iconfont icon-youtui"></i> -->
            <img src="@/assets/3.png" alt="" />
          </div>
        </div>
        <div class="item">
          <div class="imgBox">
            <img src="@/assets/three.png" alt="" />
          </div>
          <p>第3步：等待您的朋友或客户注册体验</p>
          <div class="icon">
            <!-- <i class="iconfont icon-youtui"></i>
            <i class="iconfont icon-youtui"></i> -->
            <img src="@/assets/3.png" alt="" />
          </div>
        </div>
        <div class="item">
          <div class="imgBox">
            <img src="@/assets/four.png" alt="" />
          </div>
          <p>第4步：签约成功每月获取您的返利佣金</p>
        </div>
      </div>
    </div>
    <div class="list">
      <p class="tit">推广用户</p>
      <div class="listContent">
            <div class="mes">
              <em>{{clientSum}}人</em>
              <br>
              <em>当前推广客户数</em>
            </div>
            <div class="mes">
              <em>{{clientSucces}}人</em>
              <br>
              <em>当前成交企业数</em>
            </div>
            <div class="mes">
              <el-button style="font-style:#409eff" @click="jump">查看推广客户</el-button>
            </div>
      </div>
    </div>
    <div class="list">
      <p class="tit">推广排行榜</p>
      <div class="listContent">
        <div class="item">
          <ul>
            <li>
              <img src="@/assets/littleHead.png" alt="" />
              <img src="@/assets/1.png" alt="" class="titHead">
              <!-- <span class="number" style="background-color: red">1</span> -->
              <a>李**:173****8074</a>
            </li>
            <li style="margin-top:10px">
             <img src="@/assets/littleHead.png" alt="" />
              <a>张**:138****2234</a>
            </li>
            <li style="margin-top:10px">
            <img src="@/assets/littleHead.png" alt="" />
              <a>赵**:180****5879</a>
            </li>
          </ul>
        </div>
        <div class="item">
            <ul>
            <li>
             <img src="@/assets/littleHead.png" alt="" />
             <img src="@/assets/2.png" alt="" class="titHead">
             <!-- <span class="number" style="background-color: yellow">2</span> -->
              <a>孙**:188****3476</a>
            </li>
            <li style="margin-top:10px">
             <img src="@/assets/littleHead.png" alt="" />
              <a>高**:173****0919</a>
            </li>
            <li style="margin-top:10px">
            <img src="@/assets/littleHead.png" alt="" />
              <a>郭**:153****2070</a>
            </li>
          </ul>
        </div>
        <div class="item">
            <ul>
            <li>
              <img src="@/assets/littleHead.png" alt=""  style="z-index:10"/>
              <!-- <span class="number"></span> -->
              <img src="@/assets/4.png" alt="" class="titHead">
              <a>王**:133****2643</a>
            </li>
            <li style="margin-top:10px">
             <img src="@/assets/littleHead.png" alt="" />
              <a>越**:188****8334</a>
            </li>
            <li style="margin-top:10px">
            <img src="@/assets/littleHead.png" alt="" />
              <a>王**:180****1226</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "index",
  data() {
    return {
      days:0,
      username:"",
      phone:"",
      clientSum:0,
      clientSucces:0,
      jumpUrl:'http://tktz.damaitongxin.com/#/recommendation',
    };
  },
  created() {
    this.username = localStorage.getItem("username");
    this.jumpUrl = this.jumpUrl+'?phone='+ this.username
    // this.newPhone = this.username.substr(0, 1) + "****" + this.username.substr(7, 4);
    // console.log(this.phone.substr(0, 1));
    // console.log(this.phone.substr(7, 4));
    console.log(this.username)
    this.getList()
  },
  methods: {
    getList(){
      axios
      .post("http://47.108.58.38/tk/user/dayAndmoney")
      .then(res =>{
        this.days = res.data.data.day
        this.clientSum = res.data.data.clientSum//推广客户数
        this.clientSucces = res.data.data.clientSucces//成交客户数
      })
    },
    //查看推广客户
    jump(){
      this.$router.push("/home/relation")
    },

    //复制链接按钮
     onCopy () {
      this.$message({
        message: `复制成功！请粘贴到浏览器打开`,
        type: 'success'
      });
      // this.snackBar.info(this.$t('prompt.copySuccess'))
      console.log(this.jumpUrl)
    },
    onError () {
      this.$message.error(this.$t('prompt.copyFail'))
    }
  },
};
</script>

<style scoped lang="less">
.index {
  width: 100%;
  .top {
    width: 100%;
    height: 175px;
    display: flex;
    position: relative;
    .user {
      flex: 1;
      display: flex;
      margin-top: 20px;
      img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: #ccc;
        margin-left: 20px;
      }
      .u_r {
        margin-left: 20px;
        h5 {
          font-size: 22px;
          font-weight: normal;
        }
        p {
          font-size: 16px;
          margin-top: 5px;
          em {
            color: #409eff;
          }
          span {
            color: #f00;
            font-size: 20px;
          }
        }
      }
    }
    .desc {
      width: 63%;
      height: 175px;
      // border: 1px solid #ccc;
      padding: 20px 15px;
      display: flex;
      box-sizing: border-box;
      .d_l {
        width: 60%;
        // border-right: 1px solid #ccc;
        span {
          font-size: 16px;
          
          em {
            font-size: 18px;
            color: #409eff;
          }
        }
        p {
          color: #333;
          font-size: 16px;
          margin-top: 5px;
        }
        p:nth-child(3) {
          margin-top: 5px;
        }
        .copy {
          display: flex;
          justify-content: center;
          margin-top: 15px;
        }
      }
      .d_r {
        flex: 1;
        display: flex;
        flex-direction: column;
        font-size: 14px;
        color: #7A7777;
        span{
          margin-left: 25px;
          margin-top: 5px;
        }
        img {
          width: 132px;
          height: 132px;
          margin-left: 15px;
        }
      }
    }
    .tips {
      padding: 0 15px;
      height: 20px;
      background: rgb(255, 104, 51);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #fff;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  .list {
    width: 100%;
    height: 250px;
    border: 1px solid #ccc;
    margin-top: 30px;
    .tit {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ccc;
      font-size: 14px;
      background-color: #f2f2f2;
      padding: 0 15px;
    }
    .listContent {
      width: 100%;
      height: 210px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-top: 10px;
        // .imgBox{
        //   border-radius: 50%;
        //   width: 100px;
        //   height: 100px;
        //   display: flex;
        //   justify-content: center;
        //   align-items: center;
        // }
        .titHead{
          position: absolute;
          top:10px;
          left:60px;
        }
        .number{
          position: absolute;
          left: 33%;
          top: 10px;
          // background-color: red;
          color: #fff;
          line-height: 22px;
          width: 20px;
          border-radius: 20px;
          text-align: center;
          font-size: 1px;
        }
        .mes{
          display: flex;
          text-align: center;
        }
        a{
          font-size: 10px;
        }

        p {
          font-size: 14px;
          width: 135px;
          margin-top: 10px;
        }
        .icon {
          position: absolute;
          right: -90px;
          top: 35px;
          i {
            color: rgb(253, 128, 94);
            font-size: 27px;
          }
        }
      }
      // .item:nth-child(1) .imgBox{
      //   border: 2px solid rgb(255,218,2);
      // }
      // .item:nth-child(2) .imgBox{
      //   border: 2px solid rgb(91,229,90);
      // }
      // .item:nth-child(3) .imgBox{
      //   border: 2px solid rgb(52,180,248);
      // }
      // .item:nth-child(4) .imgBox{
      //   border: 2px solid rgb(248,77,68);
      // }
    }
  }
}
</style>
